<template>
  <div>
  <el-container>
    <el-header style="background-color: transparent;height: 160px;width: 85%;margin-left: 100px">
      <div class="PersonTop">
        <div class="PersonTop_img">
          <img :src="icon" />
        </div>
        <div class="user_text">
          <div class="user_name">
            <p>姓名: {{ u_realname }}</p>
          </div>
          <div class="user_qianming">
            <span>收货地址: {{ u_address }}</span>
          </div>
          <div class="user_qianming">
            <span>个人寄语: {{ u_message }}</span>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" style="height: 500px;margin-top: 20px;margin-left: 120px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span class="person_body_list" style="border-bottom: none">个人中心</span>
          </div>
          <el-menu router active-text-color="#00c3ff" class="el-menu-vertical-demo" :default-active="def_url">
            <el-menu-item index="1" @click="topersonalinformation">
              <i class="el-icon-user"></i>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="tochangPwd">
              <i class="el-icon-lock"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>
            <el-menu-item index="3" @click="tocollect">
              <i class="el-icon-document"></i>
              <span slot="title">收藏</span>
            </el-menu-item>
            <el-menu-item index="4" @click="tofeedback">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">意见反馈</span>
            </el-menu-item>
            <el-menu-item index="5" @click="tosecuritysetting">
              <i class="el-icon-warning-outline"></i>
              <span slot="title">安全设置</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-aside>
      <el-main >
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>

<script>
export default {
  computed: {
    u_realname() {
      return sessionStorage.getItem("u_realname");
    },
    icon() {
      console.log(sessionStorage.getItem("icon"));
      return sessionStorage.getItem("icon");
    },
    u_address() {
      return sessionStorage.getItem("u_address");
    },
    u_message() {
      return sessionStorage.getItem("u_message");
    },
  },
  data() {
    return {
      def_url: '1',
    };
  },
  watch: {
    $route(to) {
      this.updateDefUrl(to.path);
    },
  },
  created() {
    this.updateDefUrl(this.$route.path);
  },
  methods: {
    topersonalinformation() {
      if (this.$route.path !== '/userhome/personalcenter/personalinformation') {
        this.$router.push('/userhome/personalcenter/personalinformation');
      }
    },
    tochangPwd() {
      if (this.$route.path !== '/userhome/personalcenter/changPwd') {
        this.$router.push('/userhome/personalcenter/changPwd');
      }
    },
    tocollect() {
      if (this.$route.path !== '/userhome/personalcenter/collect') {
        this.$router.push('/userhome/personalcenter/collect');
      }
    },
    tofeedback() {
      if (this.$route.path !== '/userhome/personalcenter/feedback') {
        this.$router.push('/userhome/personalcenter/feedback');
      }
    },
    tosecuritysetting() {
      if (this.$route.path !== '/userhome/personalcenter/security_setting') {
        this.$router.push('/userhome/personalcenter/security_setting');
      }
    },
    updateDefUrl(path) {
      switch (path) {
        case '/userhome/personalcenter/personalinformation':
          this.def_url = '1';
          break;
        case '/userhome/personalcenter/changPwd':
          this.def_url = '2';
          break;
        case '/userhome/personalcenter/collect':
          this.def_url = '3';
          break;
        case '/userhome/personalcenter/feedback':
          this.def_url = '4';
          break;
        case '/userhome/personalcenter/security_setting':
          this.def_url = '5';
          break;
        default:
          this.def_url = '1'; // 默认首页
      }
    },
  },
};
</script>

<style scoped>
.PersonTop {
  width: 100%;
  height: 140px;
  padding-top: 20px;
  background-color: white;
  display: flex;
  border-radius: 5px;
}

.PersonTop_img {
  width: 150px;
  height: 120px;
  background-color: #8c939d;
  margin-right: 24px;
  margin-left: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.PersonTop_img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.user_text {
  height: 100%;
  line-height: 30px;
  margin-top: 15px;
  text-align: left;
}

.user_name {
  font-weight: bold;
  color: black;
}

.user_qianming {
  font-size: 14px;
  color: #999;
}

.el-menu-item > span {
  font-size: 16px;
  color: #999;
}
.box-card {
  height: 100%;
}

.person_body_list {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  font-size: 22px;
  border-bottom: 1px solid rgba(140, 147, 157, 0.1);
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}
</style>
